<template>
  <div>
    <el-card class="operate-container" shadow="never">
      <div style="margin-top: 15px">
        <el-form :inline="true" size="small" label-width="140px">
          <el-form-item label="输入搜索：">
            <el-input
              style="width: 203px"
              v-model="searchObj.keyword"
              placeholder="角色名称"
            ></el-input>
          </el-form-item>

          <el-button type="primary" icon="el-icon-search" @click="search()"
            >查询</el-button
          >
          <el-button type="default" @click="resetSearch()">清空</el-button>
        </el-form>
      </div>
    </el-card>

    <!-- 工具条 -->
    <el-card class="operate-container" shadow="never">
      <i class="el-icon-tickets" style="margin-top: 5px"></i>
      <span style="margin-top: 5px">数据列表</span>

      <el-button class="btn-add" size="mini" @click="addRole">添加</el-button>
    </el-card>

    <el-table border stripe v-loading="listLoading" :data="roles">
      <el-table-column type="index" label="序号" width="100" align="center">
      </el-table-column>

      <el-table-column
        label="角色名称"
        prop="roleName"
        width="500"
        align="center"
      >
      </el-table-column>

      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="info"
            @click="
              $router.push(
                `/acl/role/auth/${scope.row.id}?roleName=${scope.row.roleName}`
              )
            "
            >分配权限</el-button
          >
          <el-button size="mini" type="primary" icon="el-icon-edit"
            >修改</el-button
          >
          <el-button
            size="mini"
            type="danger"
            icon="el-icon-delete"
            title="删除角色"
            @click="removeRole(scope.row.id)"
          />
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <el-pagination
      :current-page="page"
      :total="total"
      :page-size="limit"
      :page-sizes="[5, 10, 20]"
      style="padding: 10px"
      layout="prev, pager, next, jumper, ->, sizes, total"
      @current-change="getRoles"
      @size-change="handleSizeChange"
    />
  </div>
</template>

<script>
import RoleApi from "@/api/system/role";

export default {
  name: "RoleList",

  data() {
    return {
      listLoading: true, // 数据是否正在加载
      roles: [], // 角色列表
      total: 0, // 总记录数
      page: 1, // 当前页码
      limit: 5, // 每页记录数
      searchObj: {
        keyword: "",
      },
      selectedRoles: [], // 所有选中的角色列表
    };
  },

  mounted() {
    this.getRoles();
  },

  methods: {
    /*
      取消修改
      */
    cancelEdit(role) {
      role.roleName = role.originRoleName;
      role.edit = false;
      this.$message.warning("取消角色修改");
    },

    /*
      更新角色
      */
    updateRole(role) {
      this.$API.role
        .updateById({ id: role.id, roleName: role.roleName })
        .then((result) => {
          this.$message.success(result.message || "更新角色成功!");
          this.getRoles(this.page);
        });
    },

    /*
      每页数量发生改变的监听
      */
    handleSizeChange(pageSize) {
      this.limit = pageSize;
      this.getRoles();
    },

    /*
      添加角色
      */
    addRole() {
      // 显示添加界面
      this.$prompt("请输入新名称", "添加角色", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(({ value }) => {
          this.$API.role.save({ roleName: value }).then((result) => {
            this.$message.success(result.message || "添加角色成功");
            this.getRoles();
          });
        })
        .catch(() => {
          this.$message.warning("取消添加");
        });
    },

    /*
      异步获取角色分页列表
      */
    getRoles(page = 1) {
      this.page = page;
      this.listLoading = true;
      RoleApi.getPageList({
        pageIndex: page,
        pageSize: this.limit,
        ...this.searchObj,
      })
        .then((result) => {
          this.roles = result.data.list;
          this.total = result.data.totalCount;
        })
        .finally(() => {
          this.listLoading = false;
        });
    },

    /*
      根据搜索条件进行搜索
      */
    search() {
      this.searchObj = { ...this.tempSearchObj };
      this.getRoles();
    },

    /*
      重置查询表单搜索列表
      */
    resetSearch() {
      this.tempSearchObj = {
        roleName: "",
      };
      this.searchObj = {
        roleName: "",
      };
      this.getRoles();
    },

    /*
      删除指定的角色
      */
    removeRole({ id, roleName }) {
      this.$confirm(`确定删除 '${roleName}' 吗?`, "提示", {
        type: "warning",
      })
        .then(async () => {
          const result = await this.$API.role.removeById(id);
          this.getRoles(this.roles.length === 1 ? this.page - 1 : this.page);
          this.$message.success(result.message || "删除成功!");
        })
        .catch(() => {
          this.$message.info("已取消删除");
        });
    },

    /*
      当表格复选框选项发生变化的时候触发
      */
    handleSelectionChange(selection) {
      this.selectedRoles = selection;
    },

    /*
      批量删除
      */
    removeRoles() {
      this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
        type: "warning",
      })
        .then(async () => {
          const ids = this.selectedRoles.map((role) => role.id);
          const result = await this.$API.role.removeRoles(ids);
          this.getRoles();
          this.$message({
            type: "success",
            message: "批量删除成功!",
          });
        })
        .then((result) => {})
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style scoped>
.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
</style>
